<!--
 * Date：2017.05.14 星期日 晚上
 * Function：联系页面
 * E-mail：woaitianwen@qq.com
 * Author：zhouyulong
 */
 -->

<%- include contact_header %>

<%- include nav %>

<div class="containers">
  <div class="row header">
    <h1>联系我们 &nbsp;</h1>
    <h3></h3>
  </div>
  <div class="row body">
    <form id="addCommentForm" method="post" action="">
        <div class="con"></div>
      <ul>
        
        <li>
          <p class="left">
            <label for="username">姓名</label>
            <input id="username" name="username" type="text" placeholder="请输入姓名" />
          </p>
          <p class="pull-right">
            <label for="weixin">微信号</label>
            <input id="weixin" name="weixin" type="text" placeholder="请输入微信号" />      
          </p>
        </li>
        
        <li>
          <p>
            <label for="email">E-mail <span class="req">*</span></label>
            <input id="email" name="email" type="email"  placeholder="请输入电子邮箱" />
          </p>
        </li>        
        <li><div class="divider"></div></li>
        <li>
          <label for="comments">意见</label>
          <textarea id="comments" name="comments" cols="46" rows="3"></textarea>
        </li>
        
        <li>
          <input class="btn btn-submit" id="comment" type="submit" value="发送" />
          <!--<small>or press <strong>enter</strong></small>-->
        </li>
        
      </ul>
    </form>  
  </div>
</div>
<script>
$(document).ready(function(){
        //当提交表单时，会发生 submit 事件
        $("#addCommentForm").submit(function(e) {
            //取消事件的默认动作
            e.preventDefault();
   
            var username = $("#username").val();
            var weixin = $("#weixin").val();
            var email = $("#email").val();
            var comments = $("#comments").val();
            var data = {
                "username": username,
                "weixin": weixin,
                "email": email,
                "comments": comments
            };
            //判断用户名或者微信号
            if (username == "" || weixin == "" || email == "" || comments ==  "") {
                alert("提交时不能为空！");
                $("#username").focus();
                return false;
           }
           //ajax获取留言api接口时，返回json数据内容
            $.ajax({
                url:'http://localhost:3000/api/comment',
                type:'post',
                timeout: 3000,
                data: data,
                success: function(data) {
                    //提交的时候status等于0，返回成功状态
                    if (data.status == 0) { 
                        //创建一个简单成功的警告信息
                        var con = '<div id="myAlert" class="alert alert-success">'
                        +'<a href="#" class="close" data-dismiss="alert">&times;</a>'+ data.msg +'！'
                        +'</div>';

                        $('.con').append(con);

                        alert('成功登录！');
                        
    
                    }
                },
                error: function(data) {
                    //提交的时候status等于1，返回失败状态
                    if (data.status == 1) {
                        //创建一个失败的警告信息
                        var con = '<div id="myAlert" class="alert alert-warning">'
                                 +'<a href="#" class="close" data-dismiss="alert">&times;</a>'+ data.msg +'！'
                                 +'</div>';

                        $('.con').append(con);
                    }
                }
            });
        });     

});
    
</script>
<%- include footer %>